<template>
    <view>
        <view class="tab-top">
            <view :class="active === 0 ? 'tab-top-item active' : 'tab-top-item'" @click="active = 0">全部</view>
            <view :class="active === 1 ? 'tab-top-item active' : 'tab-top-item'" @click="active = 1">待付款</view>
            <view :class="active === 2 ? 'tab-top-item active' : 'tab-top-item'" @click="active = 2">待发货</view>
            <view :class="active === 3 ? 'tab-top-item active' : 'tab-top-item'" @click="active = 3">待收货</view>
            <view :class="active === 4 ? 'tab-top-item active' : 'tab-top-item'" @click="active = 4">待评价</view>
        </view>
        <view class="content">
            <swiper :current="active" @change="swiperChange" class="swiper">
                <block v-for="(value, key) in orderType" :key="key">
                    <swiper-item>
                        <scroll-view style="height:100%" scroll-y @scrolltolower="scrollHandle">
                            <block v-for="(item, index) in orderList" :key="index">
                                <view class="order-item" @tap="goTrueOrderDetail(item.id)">
                                    <view class="line" v-if="item.detail.length > 1"></view>
                                    <view class="order-title">
                                        <view class="order-number">订单编号：{{item.internal_order_sn}}</view>
                                        <view class="order-type" v-if="item.is_refund == 1"><text>已退款</text></view>
                                        <view class="order-type" v-else><text :style="'color:' + orderStatusColor[item.order_status]">{{orderStatus[item.order_status]}}</text></view>
                                    </view>
                                    <block v-for="(item2, index2) in item.detail" :key="index2">
                                        <view class="order-info">
                                            <view class="order-img">
                                                <img :src="item2.spu.commodity_image_thum" alt="" style="width:100%;height:100%">
                                            </view>
                                            <view class="order-info-right">
                                                <view class="order-name">{{item2.spu_name}}</view>
                                                <view class="order-price">
                                                    <view style="color:#FF1E1E;font-size:36rpx">￥{{item2.total_price}}</view>
                                                    <view style="display:flex">
                                                        <i class="iconfont icon-chenghao" style="color:#333333;font-size:26rpx;line-height:40rpx"></i>
                                                        <text style="color:#666666;font-size:26rpx;line-height:38rpx">{{item2.number}}</text>
                                                    </view>
                                                </view>
                                                <view class="order-text">共{{item2.number}}件商品，合计￥{{item2.total_price}}（含运费）</view>
                                            </view>
                                        </view>
                                    </block>
                                    <view class="order-handle" v-if="item.order_status == 1 && item.is_refund == 0">
                                        <view class="canel-order" @tap.stop="cancelOrder(item)">取消订单</view>
                                        <view class="pay" @tap.stop="orderPayment(item)">付款</view>
                                    </view>
                                    <view class="order-handle" v-if="item.order_status == 2 && item.is_refund == 0">
                                        <view class="canel-order">催单</view>
                                        <!-- <view class="pay" @tap.stop="cancelOrder(item)">退款</view> -->
                                    </view>
                                    <view class="order-handle" v-if="item.order_status == 3 && item.is_refund == 0">
                                        <view class="canel-order" @tap="goPhysicalDistribution">查看物流</view>
                                        <view class="pay" @tap.stop="goConfirmReceipt(item)">确认收货</view>
                                    </view>
                                    <view class="order-handle" v-if="item.order_status == 4 && item.is_refund == 0">
                                        <view class="canel-order" @tap.stop="cancelOrder(item)">退货</view>
                                        <view class="pay" @tap.stop="goAssessment(item)">评价</view>
                                    </view>
                                </view>
                            </block>
                        </scroll-view>
                    </swiper-item>
                </block>
            </swiper>
        </view>
        <noOrder :showNoOrder="showNoOrder"></noOrder>
        <pay :showPay="showPay" @close="closePayType" :orderData="orderData"></pay>
    </view>
</template>

<script>
import { OrderModel } from '../../model/order'
import pay from '../../components/pay/pay'
import noOrder from '../../components/no-order/no-order'
const orderModel = new OrderModel()
export default {
    data() {
        return {
            orderType: ["全部", "待付款", "待发货", "待收货", "待评价"],
            orderStatus: ["全部", "待付款", "待发货", "待收货", "待评价", "已完成", "已关闭"],
            orderStatusColor: ["", "#FF1E1E", "#FFC960", "#24C79C", "#24C79C"],
            active: 0,
            orderList: [],
            page: 1,
            flag: true,
            shop_tel: '',
            showPay: false,
            orderData: {},
            showNoOrder: false
        }
    },
    components: {
        pay,
        noOrder
    },
    methods: {
        swiperChange(e) {
            this.active = e.detail.current;
            this.orderList = []
            this.page = 1
            this.getOrderByStatus()
        },
        goTrueOrderDetail(id) {
            uni.navigateTo({
                url: '/pagesC/order-true-detail/order-true-detail?orderId=' + id
            })
        },
        // 获取订单信息
        // _getUserOrder(data) {
        //     orderModel.getUserOrder(data).then((res) => {
        //         if(res.code == 200) {
        //             this.orderList = this.orderList.concat(res.data.data)
        //             res.data.data.length == 0 ? this.flag = false : this.flag = true
        //             if(this.orderList.length == 0) {
        //                 this.showNoOrder = true
        //             }else {
        //                 this.showNoOrder = false
        //             }
        //         }
        //     })
        // },
        // 通过订单状态获取订单信息
        getOrderByStatus() {
            let data = {
                commodity_type: 0,
                order_status: this.active,
                page: this.page
            }
            // this._getUserOrder(data)
            orderModel.getUserOrder(data).then((res) => {
                if(res.code == 200) {
                    this.orderList = this.orderList.concat(res.data.data)
                    res.data.data.length == 0 ? this.flag = false : this.flag = true
                    if(this.orderList.length == 0) {
                        this.showNoOrder = true
                    }else {
                        this.showNoOrder = false
                    }
                }
            })
        },
        // 滚动分页
        scrollHandle() {
            if(this.flag == true) {
                this.page = this.page + 1
                this.getOrderByStatus()
            }
        },
        // 取消订单
        cancelOrder(item) {
            console.log(item)
            if(item.order_status == 2 || item.order_status == 1) {
                let data = {
                    internal_order_sn: item.internal_order_sn
                }
                orderModel.cancelOrderNoSend(data).then((res) => {
                    if(res.code == 200) {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        })
                        this.orderList = []
                        this.page = 1
                        this.getOrderByStatus()
                    }
                })
            }else if(item.order_status == 4 || item.order_status == 5) {
                let data = {
                    internal_order_sn: item.internal_order_sn
                }
                orderModel.cancelOrderSend(data).then((res) => {
                    if(res.code == 200) {
                        let shop_tel = res.data.shop.shop_tel
                        uni.showModal({
                            content: '退货请联系商家',
                            success: (res) => {
                                if(res.confirm) {
                                    uni.makePhoneCall({
                                        phoneNumber: shop_tel
                                    })
                                }
                            }
                        })
                    }
                })
            }
        },
        // 去评价页面
        goAssessment(item) {
            uni.navigateTo({
                url: '/pagesD/assessment/assessment?commont=' + JSON.stringify(item)
            })
        },
        // 去查看物流页面
        goPhysicalDistribution() {
            uni.navigateTo({
                url: '/pagesD/physical-distribution/physical-distribution'
            })
        },
        // 确认收货
        goConfirmReceipt(item) {
            if(item.order_status == 3) {
                let data = {
                    internal_order_sn: item.internal_order_sn
                }
                orderModel.confirmReceipt(data).then((res) => {
                    if(res.code == 200) {
                        uni.showToast({
                            title: res.msg,
                            icon: 'success'
                        })
                    }
                })
            }
        },
        closePayType() {
            this.showPay = false
        },
        // 付款
        orderPayment(item) {
            console.log(item)
            this.showPay = true
            this.orderData = { order_id: item.id, type: 1, price: item.order_total_price, commidty_type: 0 }
        }
    },
    onLoad(option) {
        console.log(option)
        this.active = parseInt(option.orderStatus)
        if(this.active == 0) {
            this.getOrderByStatus()
        }
    },
    onShow() {
        this.showPay = false
    }
}
</script>

<style>
    .tab-top {
        height: 85rpx;
        background: rgba(255,255,255,1);
        color: #333333;
        font-size: 30rpx;
        font-weight: 500;
        line-height: 85rpx;
        padding: 0 55rpx;
        display: flex;
        justify-content: space-between;
    }
    .active {
        color: #24C79C;
    }
    .tab-top-item {
        position: relative;
    }
    .active::after {
        content: '';
        position: absolute;
        bottom: 11rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 37rpx;
        height: 4rpx;
        background: #24C79C;
    }
    .content {
        height: 1362rpx;
    }
    .swiper {
        width: 100%;
        height: 100%;
    }
    .order-item {
        position: relative;
        width: 620rpx;
        margin: 20rpx auto 0;
        padding: 22rpx 27rpx;
        background:rgba(255,255,255,1);
        border-radius:10px; 
    }
    .line {
        position: absolute;
        left: 0rpx;
        bottom: 47.5%;
        width: 100%;
        height: 1rpx;
        background: #E6E6E6;
    }
    .order-item:last-child {
        margin-bottom: 156rpx;
    }
    .order-title {
        display: flex;
        justify-content: space-between;
    }
    .order-number {
        color: #333333;
        font-size: 26rpx;
        font-weight: 500;
    }
    .order-type {
        color: #FF1E1E;
        font-size: 28rpx;
        font-weight: 500;
    }
    .order-info {
        display: flex;
        justify-content: left;
        margin-top: 36rpx;
    }
    .order-img {
        width: 198rpx;
        height: 198rpx;
    }
    .order-info-right {
        margin-left: 30rpx;
    }
    .order-name {
        color: #333333;
        font-size: 32rpx;
        font-weight: 500;
    }
    .order-price {
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
    }
    .order-text {
        color: #999999;
        font-size: 24rpx;
        margin-top: 31rpx;
    }
    .order-handle {
        display: flex;
        justify-content: flex-end;
    }
    .canel-order {
        width: 148rpx;
        height: 46rpx;
        border: 1rpx solid rgba(229,229,229,1);
        border-radius: 23rpx;
        color: #999999;
        font-size: 28rpx;
        font-weight:500;
        text-align: center;
        line-height: 46rpx;
        margin-right: 26rpx;
    }
    .pay {
        width: 122rpx;
        height: 46rpx;
        border: 1rpx solid rgba(36,199,156,1);
        border-radius: 23rpx;
        font-weight:500;
        font-size: 28rpx;
        color:rgba(36,199,156,1);
        text-align: center;
        line-height: 46rpx;
    }
</style>